import React from 'react';
import './index.less';
import {
  Select,
  Form,
  Input,
  InputNumber,
  Radio,
  DatePicker,
  Dropdown,
  Space,
} from 'antd';
import { Checkbox } from 'antd-mobile';
import { DownOutlined } from '@ant-design/icons';

import axios from 'axios';
const { Search, TextArea } = Input;
const { RangePicker } = DatePicker;
import { history } from 'umi';

import moment from 'moment';
import dayjs from 'dayjs';
const dateFormat = 'YYYY/MM/DD';

// 搜索
const onSearch = (values) => {
  console.log(values);
};

// 下拉菜单
const items = [
  {
    key: '1',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印设置
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印列表
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印单据
      </a>
    ),
  },
];
export default function index(props) {
  // console.log(props.location.state.pathData, 65);
  let collect = moment(props.location.state.pathData.collect).format(
    'YYYY/MM/DD',
  );
  // 表单
  const onFinish = (values) => {
    values = { _id: props.location.state.pathData._id, ...values };

    if (values.collect) {
      values.collect = moment(values.collect._d).format('YYYY/MM/DD');

      axios
        .patch('http://127.0.0.1:7777/prepay/editaddlist', values)
        .then((res) => {
          history.push('/home/finance/collection');
        });
    } else {
      values.collect = collect;
      axios
        .patch('http://127.0.0.1:7777/prepay/editaddlist', values)
        .then((res) => {
          history.push('/home/finance/collection');
        });
    }
  };
  return (
    <div className="edit">
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          width: '100%',
        }}
        initialValues={{
          remember: true,
          username: props.location.state.pathData.username,
          amount: props.location.state.pathData.amount,
          bank: props.location.state.pathData.bank,
          gender: props.location.state.pathData.gender,
          handle: props.location.state.pathData.handle,
          relation: props.location.state.pathData.relation,
          remarks: props.location.state.pathData.remarks,
          collect: dayjs(collect, dateFormat),
        }}
        onFinish={onFinish}
      >
        <div className="buts">
          <button>保存</button>
          <button className="but">保存并新增</button>
          <button className="but">草稿箱</button>
          <button className="but">删除</button>
          <button className="but">导入</button>
          <button className="but">
            <Dropdown
              menu={{
                items,
              }}
            >
              <div onClick={(e) => e.preventDefault()}>
                <Space>
                  打印
                  <DownOutlined />
                </Space>
              </div>
            </Dropdown>
          </button>{' '}
          <button className="but">查看日历</button>
        </div>
        <h2>预收款</h2>
        <table border="1">
          <thead>
            <tr>
              <td colspan="4">基本信息</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <span>客户名称：</span>
                <Form.Item
                  name="username"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Search
                    placeholder="请输入"
                    onSearch={onSearch}
                    style={{ marginTop: '1px', width: '200px' }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>预收金额：</span>
                <Form.Item
                  name="amount"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <InputNumber
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>收款账户名称：</span>
                <Form.Item
                  name="bank"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Select style={{ marginTop: '1px', width: '200px' }}>
                    <Select.Option value="全部">全部</Select.Option>
                    <Select.Option value="中国建设银行">
                      中国建设银行
                    </Select.Option>
                    <Select.Option value="中国农业银行">
                      中国农业银行
                    </Select.Option>
                    <Select.Option value="中国银行">中国银行</Select.Option>
                  </Select>
                </Form.Item>
              </td>
              <td>
                <span>是否开票：</span>
                <Form.Item
                  name="gender"
                  style={{
                    width: 300,
                    display: 'inline-block',
                  }}
                >
                  <Radio.Group
                    style={{
                      backgroundRepeat: '20px',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  >
                    <Radio value="不开票">不开票</Radio>
                    <Radio value="销售时开票">销售时开票</Radio>
                  </Radio.Group>
                </Form.Item>
              </td>
            </tr>
            <tr>
              <td>
                <span>预收日期：</span>
                <Form.Item
                  name="collect"
                  style={{
                    width: 300,
                    display: 'inline-block',
                  }}
                >
                  <DatePicker style={{ width: '200px' }} />
                </Form.Item>
              </td>
              <td>
                <span>预收人员：</span>
                <Form.Item
                  name="handle"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input style={{ width: '200px' }} />
                </Form.Item>
              </td>
              <td>
                <span>关联项目:</span>
                <Form.Item
                  name="relation"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Search
                    placeholder="请输入"
                    onSearch={onSearch}
                    style={{ marginTop: '1px', width: '200px' }}
                  />
                </Form.Item>
              </td>
            </tr>
            <tr style={{ height: '100%' }}>
              <td colspan="4" style={{ height: '100%' }}>
                <span style={{ lineHeight: '200px' }}>备注:</span>
                <Form.Item
                  name="remarks"
                  style={{
                    // width: ' ',
                    display: 'inline-block',
                    lineHeight: '200px',
                  }}
                >
                  <TextArea
                    style={{ height: '200px', width: 'calc(100vw - 485px)' }}
                  />
                </Form.Item>
              </td>
            </tr>
          </tbody>
        </table>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        ></Form.Item>
      </Form>
      {/* 上传文件表格 */}
      <div className="upload">
        <div className="top">
          <span>附件上传</span>
          <button>批量上传</button>
        </div>
        <hr />
        <div className="upContent">
          <div className="titles">
            <span>文件名称</span>
            <span>文件大小</span>
            <span>上传人</span>
            <span>上传时间</span>
          </div>
          <hr />
          <div style={{ height: '100px' }}></div>
        </div>
      </div>
    </div>
  );
}
